# 颜色背景渐变 `color background liner-gradient`

# 颜色 `color`（前景色） / `background`（背景色）

# 前景色 `color`

允许值：<color>

默认值：浏览器指定

是否继承：是

设置的 color 值默认会作为边框的颜色值，除非使用 border-color 手动设置边框颜色。

实际上默认值应该是： border-color: currentColor，而 currentColor 这个关键字就是 color 值的计算值。

# 背景 `background`

可以吧元素背景设为纯色，一个或多个图像，线性渐变或径向渐变。

默认地，元素的背景会绘制在 content + padding + border 的范围内。border 在 background 之上。

# 背景色 `background-color`

允许值：<color>

默认值：transparent

是否继承：否

/* 利用背景色和边框，为图像设置看起来像是双色边框 */
img {
  background-color: red;
  padding: 5px;
  border: 5px solid gold;
}

1
2
3
4
5
6

# 裁剪背景 `background-clip`

允许值：[ border-box | padding-box | content-box | text ]#

默认值：border-box

是否继承：否

背景区域默认会包含边框及以内的区域。以至于如果边框使用虚线绘制，会在虚线的间隙处看到底部的背景色，这不是期望的效果。

padding-box 背景绘制区域在 padding 及以内的范围
content-box 背景绘制区域在 content 及以内的范围
text 背景绘制区域只在文本范围内

截止 2017 年末，只有 Firefox 支持 text 值，但几乎所有都支持 -webkit-background-clip: text;

设置为 text 值之后，背景色与前景色 color 将会完全重合，如果 color 不设置透明，将完全遮挡住 background，从而看不见背景色。

/* 前景色 color 不透明，字体还是前景色，背景色完全被覆盖 */
div{
  color: rgba(255, 0, 0, 1);
  background-color: #00f;
  background-clip: content-box;
  -webkit-background-clip: text;
}

/* 前景色 color 半透明，字体看起来会变成紫色（前景色与背景色融合在一起） */
div{
  color: rgba(255, 0, 0, 0.5);
  background-color: #00f;
  background-clip: content-box;
  -webkit-background-clip: text;
}

/* 前景色 color 全透明，字体看起来将变成背景色的颜色 */
div{
  color: rgba(255, 0, 0, 0);
  background-color: #00f;
  background-clip: content-box;
  -webkit-background-clip: text;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 背景图 `background-image`

允许值：[ <image># | none

默认值：none

是否继承：否

<image> 可以是 [ <uri> | <linear-gradient> | <repeating-linear-gradient> | <radialgradient> | <repeating-radial-gradient> ] 其中任意一种。

可以同时指定背景色和背景图，这样背景图在加载失败的情况下，会显示背景色作为背景。

div {
  background-image: url(./some-img.jpg);
  background-color: #000;
  color: #fff;
}

1
2
3
4
5

# 背景定位 `background-position`

允许值：<position>#

默认值：0% 0%

是否继承：否

关键字，顺序随意，不超过两个，第一个指定横向位置，第二个指定纵向位置。如果使用两个横向关键字（如：right right）或两个纵向关键字（如：top top），则无效，会被忽略。

百分数值，第一个表示横向，第二个表示纵向，这两个值表示一个点，同时表示的是背景图像上的某个点和元素上的某个点，让这两个点重合在一起。

关键字与百分数值对应关系：

关键字	等效关键字	等效百分数值
center	center center	50% 50%
		50%
right	center right	100% 50%
	right center	100%
left	center left	0% 50%
	left center	0%
top	top center	50% 0%
	center top
bottom	bottom center	50% 100%
	center bottom
top left	left top	0% 0%
top right	right top	100% 0%
bottom right	right botto	100% 100%
bottom left	left bottom	0% 100%

长度值，第一个表示横向，第二个表示纵向，但不同于百分数，长度值只表示元素上距离左上角（0 0）偏移指定长度的某个点，而背景图像始终是用左上角（0 0）去与这个指定点重合在一起。

百分数值可以与长度值混用。
负值，将背景图拉到背景区域外，只展示区域内的一部分图像作为背景图像。负值的计算方式依然按照百分比或长度各自的计算方式。

# 改变偏移相对的边

background-position 默认相对于元素的左上角（left top）偏移，比如：

div{
  background-position: 33% 30px; /* 相对于左侧边偏移 33%，相对于顶边偏移 30px */
}

1
2
3

实际上，上例的完整写法则是：

/* 相对于左侧边偏移 33%，相对于顶边偏移 30px */
div{
  background-position: left 33% top 30px;
}
/* 也等效于 */
div{
  background-position: top 30px left 33%;
}

1
2
3
4
5
6
7
8

上例表明，第一个值和第三个值分别指明相对于横向和纵向的哪一边进行偏移，但横向和纵向的顺序随意。关键字后的值则是偏移量。

注意，关键字不能只写一个，要不就不写，要不就必须写两个，但偏移量为 0 时则可以省略

div{
  background-position: 30px left 33%; /* 无效 */
}
div{
  background-position: top left 33%; /* 有效，相对于顶边偏移量为 0 */
}

1
2
3
4
5
6

# 改变背景图的定位（放置）范围 `background-origin`

允许值：[ border-box | padding-box | content-box ]#

默认值：padding-box

是否继承：否

确定原始背景图像位置的边缘在哪里，默认从定位在 padding 及其内部的范围内。

padding-box 默认定位在 padding 及其内部的范围内。
border-box 定位在 border 及其内部的范围内。
content-box 定位在 content 及其内部的范围内。

background-origin 与 background-clip 共同使用时：

/* 背景绘制区域 content，但是背景图定位范围为 padding */
/* 背景色只在 content 范围内 */
/* padding 也只在 content 范围内可见，但是其实是从 padding 开始放置的背景图像，只是 content 之外部分不可见 */
#ex01 {
  background-clip: content-box;
  background-origin: padding-box;
}

/* 背景绘制区域 padding，但是背景图定位范围为 content */
/* 背景色在 padding 范围内 */
/* 背景图仅放置在 content 范围内 */
#ex02 {
  background-clip: padding-box;
  background-origin: content-box;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 背景重复方式 `background-repeat`

允许值：repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

默认值：repeat

是否继承：否

如果设定两个值，则分别应用于横向和纵向，一个值则横向和纵向均生效（一个值除 repeat-x | repeat-y 以外）。

重复方式：

单个关键字	等效的两个关键字
repeat-x	repeat no-repeat
repeat-y	no-repeat repeat
repeat	repeat repeat
no-repeat	no-repeat no-repeat
space	space space
round	round round

repeat 默认值，从元素左上角（background-position 默认）开始，横向纵向均重复图片平铺。
repeat-x 只在横向上重复平铺图片
repeat-y 只在纵向上重复平铺图片
space 先计算一个方向（横向和纵向）能重复多少次，然后均分分布。间隙能看到背景色。图片太大时最少出现一次。
round 计算能重复次数并四舍五入，可能为放大或缩小图片以刚好无缝铺满。
no-repeat 不重复

# 背景附着 `background-attachment`

← padding border margin outline

# 颜色 背景 渐变 color background liner-gradient

# 颜色 color（前景色） / background（背景色）

# 前景色 color

# 背景 background

# 背景色 background-color

# 裁剪背景 background-clip

# 背景图 background-image

# 背景定位 background-position

# 改变偏移相对的边

# 改变背景图的定位（放置）范围 background-origin

# 背景重复方式 background-repeat

# 背景附着 background-attachment

# 颜色背景渐变 `color background liner-gradient`

# 颜色 `color`（前景色） / `background`（背景色）

# 前景色 `color`

# 背景 `background`

# 背景色 `background-color`

# 裁剪背景 `background-clip`

# 背景图 `background-image`

# 背景定位 `background-position`

# 改变背景图的定位（放置）范围 `background-origin`

# 背景重复方式 `background-repeat`

# 背景附着 `background-attachment`